<template>
  <div class="login u-f u-f-ac u-f-jc" @keyup.enter="login">
    <div class="back_box">
      <div class="title font16 text_black">{{ $t('共享设备管理系统') }}</div>

      <!-- <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link font14 text_black">
          {{langTxt}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="zh">中文</el-dropdown-item>
          <el-dropdown-item command="en">English</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->

      <!-- <el-input prefix-icon="el-icon-help" v-model="ocode" :placeholder="$t('请输入企业标识')"></el-input> -->
      <el-input prefix-icon="el-icon-user" v-model="username" :placeholder="$t('请输入用户名')"></el-input>
      <el-input prefix-icon="el-icon-lock" show-password v-model="password" :placeholder="$t('请输入密码')"></el-input>
      <el-button type="primary" v-if="flag" @click="login">{{ $t('登录') }}</el-button>
    </div>
  </div>
</template>

<script>
import util from "@/assets/js/util.js"
import { mapState, mapMutations } from 'vuex'
import { Notification } from 'element-ui';
export default {
  data() {
    return {
      ocode: 'weidian',
      username: '',
      password: '',
      lang: '',
      langTxt: '中文',
      flag: process.env.VUE_APP_ENV === 'removeSkipOrder' ? false : true
    }
  },
  mounted(){
    this.setToken(null)
    this.setCode(null)
    this.setMenu(null)
    this.setPermissions(null)
    this.setEquipmentModel(null)
    this.setMemusid(null)
    this.setUid(null)
    this.setName(null)
  },
  methods: {
    ...mapMutations(['setToken', 'setCode', 'setMenu', 'setPermissions', 'setEquipmentModel','setMemusid','setUid','setName']),
    handleCommand(command) {
      switch (command) {
        case 'zh':
          this.langTxt = '中文'
          break;
        case 'en':
          this.langTxt = 'English'
          break;
        default:
          break;
      }
      this.lang = command
      this.$i18n.locale = command
      localStorage.setItem('lang', command)
    },
    login() {
      util.$http('/Auth/login', {
        name: this.username,
        password: this.password
      })
        .then(res => {
          if (res.code == 1) {
            let data = JSON.stringify(res.data)
            let model = [
              {
                id: '',
                name: this.$t("请选择设备型号"),
                num: 0
              },
              ...res.data.equipment
            ]
            console.log("打印一下res了");
            console.log(res);
            this.setToken(res.data.token)
            this.setCode(res.data.ocode)
            this.setMenu(res.data.menu)
            this.setPermissions(res.data.permissions)
            this.setEquipmentModel(model)
            this.setMemusid(res.data.memusid)
            this.setUid(res.data.uid)
            this.setName(res.data.name)
            localStorage.setItem('zd_sky', data)
            this.$router.replace({ path: '/' })
            //查询是否有账单需要支付, 有的话要提前提示  ite.amount>0代表有钱要付款
            util.$http('/user/getCheck').then(ite => {
              if (ite.code == 1 && ite.amount > 0) {
                const not = Notification({
                  title: '提示',
                  message: `${ite.msg},单击可以去支付`,
                  type: 'warning',
                  duration: 0,
                  onClick:()=> {
                    not.close()
                    this.$router.replace({
                      name: "payment",
                      query: {
                        DD: JSON.stringify(ite)
                      }
                    });
                  },
                });
              }
            })
          }

        })

    }
  },
  created() {
    console.log(process.env.VUE_APP_ENV)
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/img/login.jpg');
  background-size: 100% 100%;
}

.back_box {
  position: relative;
  width: 400px;
  padding: 40px 40px;
  border-radius: 5px;
  background-color: #ffffff;
  box-sizing: border-box;
}

.el-dropdown {
  position: absolute !important;
  right: 40px;
  top: 40px;
}

.el-dropdown-link {
  cursor: pointer;
}

.back_box .title {
  text-align: center;
  margin-bottom: 40px;
}

.el-input {
  margin-bottom: 35px;
}

.el-button {
  width: 100%;
  margin-top: 10px;
}
</style>